<template>
    <div class="author-page">
        <div id="mescroll" class="mescroll" v-mescroll="{up:'upCallback',size:page.pageSize,num:page.pageNo}">
            <div class="mescroll-bounce">
                <div class="wrapper">
                    <z-history :type="2"></z-history>
                    <div class="author-head">
                        <div>
                            <img class="head-img" :src="this.$store.state.picHead + publish.hostLogo" alt="">
                        </div>
                        <div class="name">{{publish.hostCompany}}</div>
                        <subscrib :author="publish" class="sub-box" ></subscrib>
                        <div class="fan">粉丝&nbsp;&nbsp;{{publish.subNum}}</div>
                        <div class="desc" :class="open*1===2?'showmore':'omit'">
                            {{publish.hostDesc}}
                            <span class='open' @click="openDesc(2)" v-if="open*1===1">展开</span>
                            <span class="unopen" @click="openDesc(1)" v-else>收起</span>
                        </div>
                    </div>
                    <div class="article-list" v-if="this.$route.params.autype*1===1">
                        <div class="article-title">发布的文章({{page.count}})</div>
                        <article-list :list='articleList' class="list-out"></article-list>
                    </div>
                    <div class="activity-list" v-if="this.$route.params.autype*1===2">
                        <div class="article-title">发布的活动({{page.count}})</div>
                        <activity-list :list='activityList' class="list-out"></activity-list>
                    </div>

                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import {appService} from '../../service/appService'
    import {authorService} from '../../service/authorService'
    import subscrib from '../../component/common/subscrib'
    import articlelist from '../../component/list/article-list.vue'
    import activitylist from '../../component/list/activity-list.vue'

    export default {
        components: {'subscrib': subscrib,'article-list':articlelist,'activity-list':activitylist},
        // 添加以下代码
        metaInfo () {
            // console.log(this);
            const title = this.publish.hostCompany
            const desc = this.publish.hostDesc
            return {
                title,
                meta: [
                    { vmid: 'description', name: 'description', content: desc },
                    { vmid: 'keyWords', name: 'keyWords', content: '运联,'+ title},
                ]
            }
        },
        data () {
            return {
                count: 1,open:1
            }
        },
        asyncData({store, route}) {
            let params={
                type:2,adminId:route.params.autId
            }
            function getarticleList() {
                store.state.homeStore.page = {pageNo:1,pageSize:10,queryType:1,adminId:route.params.autId}
                return authorService.articleList(store.state.homeStore.page).then(function (res) {
                    store.state.homeStore.articleList = res.data.datas.datas
                    store.state.homeStore.page.total = res.data.datas.totalPage
                    store.state.homeStore.page.count = res.data.datas.totalCount
                    store.state.homeStore.page.pageNo = 2
                })
            }
            function getactivityList() {
                store.state.homeStore.page = {pageNo:1,pageSize:10,queryType:1,adminId:route.params.autId,sortKey:'publishTime'}
                return authorService.getactivities(store.state.homeStore.page).then(function (res) {
                    store.state.homeStore.activityList = res.data.datas.datas
                    store.state.homeStore.page.total = res.data.datas.totalPage
                    store.state.homeStore.page.count = res.data.datas.totalCount
                    store.state.homeStore.page.pageNo = 2
                })
            }
            function getauthor() {
                return authorService.myFollowMain(params).then(function(res){
                    store.state.homeStore.publish=res.data.datas
                })
            }

            if(route.params.autype*1===1){
                return Promise.all([
                    getauthor(),getarticleList()
                ])
            }else{
                return Promise.all([
                    getauthor(),getactivityList()
                ])
            }


        },
        computed: {
            //将存在store中的数据取出
            publish: {
                get: function () {
                    return this.$store.state.homeStore.publish || {}
                },
                set: function (newValue) {
                    return newValue
                }
            },
            articleList: {
                get: function () {
                    return this.$store.state.homeStore.articleList || {}
                },
                set: function (newValue) {
                    return newValue
                }
            },
            activityList: {
                get: function () {
                    return this.$store.state.homeStore.activityList || {}
                },
                set: function (newValue) {
                    return newValue
                }
            },
            page: {
                get: function () {
                    return this.$store.state.homeStore.page || []
                },
                set: function (newValue) {
                    return newValue
                }
            },
        },
        mounted: function () {
            let that = this
            console.log(that.$route.params);
            if(that.$route.params.autype==1){
                setTimeout(function () {
                    document.title = "作者主页"
                },1)
            }else{
                setTimeout(function () {
                    document.title = "主办方主页"
                },1)
            }
            /*
             * 微信分享设置
             * */
            let params={
                hasGet:true,
                title : that.publish.hostCompany,
                desc : that.publish.hostDesc,
                img : that.$store.state.picHead + that.publish.hostLogo
            }
            appService.getWxJssdk().then(function () {
                appService.getWxShare(params,that.publish.hostCompany)
            })
        },
        methods: {
            //搜索，带关键字跳转搜索页
            /*search:function (v) {
             let that = this
             that.$router.replace({name:'search',params:{type:1,query:v}})
             },*/
            //获取文章列表
            getarticleList: function () {
                let that = this
                let store = that.$store
                authorService.articleList(that.page).then(function (res) {
                    if (!res.data || !res.data.datas) return
                    let list = res.data.datas.datas
                    if (that.page.pageNo * 1 === 1) {
                        store.state.homeStore.articleList = res.data.datas.datas
                    } else {
                        for (let i in list) {
                            store.state.homeStore.articleList.push(list[i])
                        }
                    }
//                    that.articleList = that.$store.state.homeStore.articleList
                    that.page.pageNo += 1
                    that.mescroll.endSuccess(list.length);
                })
            },
            getarticleList: function () {
                let that = this
                let store = that.$store
                authorService.getactivities(that.page).then(function (res) {
                    if (!res.data || !res.data.datas) return
                    let list = res.data.datas.datas
                    if (that.page.pageNo * 1 === 1) {
                        store.state.homeStore.articleList = res.data.datas.datas
                    } else {
                        for (let i in list) {
                            store.state.homeStore.articleList.push(list[i])
                        }
                    }
//                    that.articleList = that.$store.state.homeStore.articleList
                    that.page.pageNo += 1
                    that.mescroll.endSuccess(list.length);
                })
            },
            //上拉
            upCallback: function () {
                let that = this
                if(that.$route.params.autype*1===1){
                    that.getarticleList()
                }else{
                    that.getarticleList()
                }
            },
            //上拉
            openDesc: function (v) {
                this.open=v
            },
        },
        watch: {},
    }
</script>

<style lang="less">
    @import url("../../assets/css/mescroll.min.css");

    .author-page .mescroll{
        bottom: 1.2rem !important;
        background:#fff;
        .out-item{
            padding-bottom:.4rem;
            border-bottom:1px solid #f0f0f0;
            background:#fff;
            .head-img{
                border-radius:0;
            }
        }
        .list-out{
            padding-top:.3rem;
        }
        .article-title {
            font-size: 14px;
            color: #666666;
            letter-spacing: 0.23px;
            padding: 15px 0 0 15px;
        }
        .author-head{
            padding-top:20px;
            background: #2A2A2A;
            background-image: url(../../assets/image/Group.png);
            background-size: 100%;
            color: #fff;
            text-align:  center;
            .head-img {
                height:  70px;
                width:  70px;
                border-radius:  50%;
            }
            .subscrib-box.sub-box {
                border: 1px solid #fff;
            }
            .subscrib {
                color: #fff!important;
            }
            .name {
                font-size: 18px;
                letter-spacing: 0.3px;
                text-shadow: 0 1px 1px rgba(0,0,0,0.50);
                line-height: 40px;
            }

            .fan {
                font-size: 14px;
                color: #FFFFFF;
                letter-spacing: 0.23px;
                text-shadow: 0 1px 1px rgba(0,0,0,0.50);
                line-height: 35px;
            }

            .desc {
                background:  #000;
                font-size: 12px;
                color: #FFFFFF;
                letter-spacing: 0.2px;
                text-shadow: 0 1px 0 rgba(0,0,0,0.50);
                line-height:  30px;
                height:  30px;
                height: 30px;
                overflow: hidden;
                padding-right: 1.2rem;
                padding-left: 10px;
                position:relative;
                .open{
                    position:absolute;
                    right:10px;top:0;
                    color:#20a0ff;
                }
                .unopen{
                    padding-left:5px;
                    color:#20a0ff;
                }
            }
            .desc.showmore{
                height:auto!important;
                padding-right:10px!important;
                text-align:left;
            }
        }
        .select-title{
            width:100%;
            display:flex;
            background:#fff;
            .author,.publisher{
                flex:1;
                text-align:center;
                line-height:1.2rem;
                font-size: .426rem;
                color: #333333;
                box-shadow: inset 0 -1px 0 0 rgba(221,221,221,0.50);
            }
            .active{
                border-bottom:1px solid #20A0FF;
                color:#20A0FF;
            }
        }
    }

</style>
